<template>
	<div>
		<body>
					<main>
						<div class="body-carts">
							<div class="wrapper">
								<div class="body-carts-title">
									<h2><i class="iconfont icon-aixin"></i>我的购物车。</h2>
								</div>
								<div class=" body-carts-order">
                  <div class="flex-row">
                    <div class="flex-col-4 carts">
                      <i class="iconfont icon-chenggong"></i>
                    </div>
                    <div class="flex-col-4 carts">
                      <i class="iconfont icon-tupian"></i>
                    </div>
                    <div class="flex-col-4 carts">
                      <i class="iconfont icon-fanbei"></i>
                    </div>
                    <div class="flex-col-4 carts">
                      <i class="iconfont icon-tianjiayouhuiquan"></i>
                    </div>
                    <div class="flex-col-4 carts">
                      <i class="iconfont icon-yulebao"></i>
                    </div>
                    <div class="flex-col-4 carts">
                      <i class="iconfont icon-dingdan"></i>
                    </div>
                  </div>

                  <el-empty description="description" v-if="cartTotalCount === 0"/>
                  <div class="flex-row"   v-for="list in itemList" :key="list.id" v-else>
                    <div class="flex-col-4 carts2">
                      <input type="checkbox" name="" id="boxx" value="" />
                      <!--<div>{{ list.name }}</div>-->
                    </div>
                    <div class="flex-col-4 carts2">
                      <img :src="'/src/' + list.imgPath" style="width:100px; height: 100px" />
                      <div>{{ list.name }}</div>
                    </div>
                    <div class="flex-col-4 carts2">
                      <!-- <input type="number" name="" id="box-number" value="" step="1" min="1"/> -->
                      <!--<a href="javascript:;" class="decrement">-</a>-->
                      <!--<input type="text" id="box-number" value="1" step="1" min="1">-->
                      <!--<a href="javascript:;" class="increment">+</a>-->
                      <div class="favourable">
                        <i class="iconfont icon-youhuiquan"></i>
                        <span>{{ list.price }}</span>
                      </div>
                    </div>
                    <div class="flex-col-4 carts2">
                      <div style="padding-top: 35px">
                        <el-input-number v-model="list.count" :min="1" :max="10" @change="handleChange(list.id, list.count)" />
                      </div>
                    </div>
                    <div class="flex-col-4 carts2">
                      <div class="price">{{ list.totalPrice }}</div>
                    </div>
                    <div class="flex-col-4 carts2">
                      <div @click="deleteItem(list.id)" class="clear">
                        删除
                      </div>
                    </div>
                  </div>

								</div>
								<div class="flex-row body-carts-pay">
									<div class="flex-col-4">
										
									</div>
									<div class="flex-col-4">
										
									</div>
									<div class="flex-col-4">
										
									</div>
									<div class="flex-col-4">
										
									</div>
									<div class="flex-col-4 total2">
										<h3>总金额：<span class="total3" style="color: red">{{ finalTotalPrice }}</span></h3>
									</div>
									<div class="flex-col-4">
										<el-button type="danger" class="pay" @click="addOrder">
											<h2>立即支付</h2>
                    </el-button>
									</div>
								</div>
							</div>
						</div>
					</main>
			</body>
		
	</div>
</template>

<script>
  import request from "@/utils/request.js";
  import {ElMessage, ElNotification} from "element-plus";

  export default {
    data(){
      return{
        itemList: [],
        finalTotalPrice: 0,
        cartTotalCount: 0
      }
    },
    created() {
      this.cartList();
    },
    methods: {
      cartList(){
        request.post("/api/cartList").then(
            res => {
              // console.log("res", res);
              if (res.code === "200"){
                this.itemList = res.data.cartItemMap
                this.finalTotalPrice = res.data.finalTotalPrice
                this.cartTotalCount = 1;
                // console.log("itemList=", this.itemList)
              }
              if(res.code === "555"){
                ElMessage({
                  message: '你还未添加商品到购物车',
                  type: 'warning',
                })
                this.cartTotalCount = 0;
              }
              if(res.code === "440"){
                ElMessage({
                  message: res.msg,
                  type: 'warning',
                })
                this.cartTotalCount = 0;
              }
            }
        )
      },
      handleChange(id, count){
        // console.log("id=", id);
        // console.log("count=", count);
        request.get("/api/modify", {
          params: {
            id: id,
            count: count
          }
        }).then(
            res => {
              // console.log("res", res);
              if (res.code === '200'){
                this.cartList();
              }
              if (res.code === '555'){
                ElMessage({
                  message: '操作失败',
                  type: 'error',
                })
                this.cartList();
              }
            }
        )
      },
      deleteItem(id){
        request.delete("/api/delete/" + id).then(
            res => {
              // console.log("res", res);
              if (res.code === '200'){
                ElMessage({
                  message: res.msg,
                  type: 'success',
                })
                this.cartList();
              }
              if (res.code === '555'){
                ElMessage({
                  message: '删除失败',
                  type: 'error',
                })
                this.cartList();
              }
            }
        )
      },
      addOrder(){
        request.post("/api/addOrder").then(
            res => {
              if (res.code === '200'){
                ElNotification.success({
                  title: '下单成功',
                  message: '订单号：' + res.data,
                  showClose: false,
                })
              }
              if (res.code === '486'){
                ElMessage({
                  message: res.msg,
                  type: 'warning',
                })
              }
              if (res.code === '487'){
                ElMessage({
                  message: res.msg,
                  type: 'warning',
                })
              }
              this.cartList();
            }
        )
      },
    }
  }
</script>

<style>
</style>